<template>
  <div class="header">
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        router
        background-color="#222"
        text-color="#fff"
        active-text-color="#4bc5ff">
      <el-menu-item><router-link to="/"><img src="../assets/logo.png" alt="../assets/logo.png" style="height: 70%"></router-link></el-menu-item>
      <el-row type="flex" justify="end" align="middle">
<!--        小屏幕展示-->
        <el-menu-item style="text-align: center;padding: 0 10px;margin-right: 5px" class="hidden-sm-and-up" @click="drawer = true"><i class="el-icon-more" style="margin: 0"></i></el-menu-item>
        <el-menu-item v-if="username" style="text-align: center;padding: 0 10px;margin-right: 5px" class="hidden-sm-and-up" @click="quickhide"><i class="el-icon-s-custom" style="margin: 0"></i></el-menu-item>
<!--        大屏幕展示-->
        <el-menu-item class="hidden-xs-only" style="text-align: center;padding: 0 5px;margin-right: 5px" @click="quickhide" v-if="username"><span>您好，{{ usermingzi?usermingzi:username }}
          <el-avatar :src="usreimg?usreimg:imgsrc" :size="35" style="margin-left: 10px"></el-avatar></span>
        </el-menu-item>
      </el-row>
    </el-menu>
    <el-drawer
        size="70%"
        title="侧边导航栏"
        :visible.sync="drawer"
        :with-header="false">
        <Nav @nav_event="getSelect"></Nav>
    </el-drawer>
    <el-drawer
        size="345px"
        title="账户档案"
        :visible.sync="quickuesr"
        :with-header="false">
      <div style="padding: 20px">
        <el-row type="flex" justify="space-between" align="middle">
          <h4>账户档案</h4>
          <el-button icon="el-icon-close" style="padding: 5px;height: 26px;line-height: 14px" @click="quickuesr=false"></el-button>
        </el-row>
        <QuickUser @quickuserhide="hide"></QuickUser>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import QuickUser from "@/components/QuickUser";
import {mapState} from 'vuex';
import userimg from "@/assets/userAvatar.png";
import qs from "qs";
import {delImgArticle} from "../utils/api";
export default {
  name: "Headero",
  data() {
    return {
      activeIndex: '',
      activeIndex2: '',
      drawer: false,
      quickuesr:false,
      imgsrc:userimg,
    };
  },
  methods: {
    getSelect(v){
      this.drawer=v;
    },
    quickhide(){
      this.quickuesr=true;
      this.$store.dispatch('createHeader');
    },
    hide(){
      this.quickuesr=false;
    },
  },
  components:{
    Nav,QuickUser
  },
  computed:{
    ...mapState([
      "username",
      "usermingzi",
      "usreimg",
      "dlzt"
    ])
  },
  created() {
    if(localStorage.getItem("userToken")){
      this.$store.dispatch('createHeader');
    }
    if(localStorage.getItem("editaddtupian")){
      /*修改文章非正常关闭浏览器*/
      delImgArticle(qs.stringify({imgsrc: JSON.stringify(localStorage.getItem("editaddtupian").split(","))})).then(respose=>{
        /*删除成功 清空缓存*/
        if(respose.status===200){
          localStorage.removeItem("editaddtupian")
        }
      }).catch(error=>{
        console.log(error);
      })
    }
    if(localStorage.getItem("editnewdelImg")){
      /*修改文章非正常关闭浏览器*/
      delImgArticle(qs.stringify({imgsrc: JSON.stringify(localStorage.getItem("editnewdelImg").split(","))})).then(respose=>{
        /*删除成功 清空缓存*/
        if(respose.status===200){
          localStorage.removeItem("editnewdelImg")
        }
      }).catch(error=>{
        console.log(error);
      })
    }
    if(localStorage.getItem("fabutupian")){
      /*发布文章非正常关闭浏览器*/
      delImgArticle(qs.stringify({imgsrc: JSON.stringify(localStorage.getItem("fabutupian").split(","))})).then(respose=>{
        /*删除成功 清空缓存*/
        if(respose.status===200){
          localStorage.removeItem("fabutupian")
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  },
}
</script>

<style scoped>
.header{
  height: 60px;
}
.header>>>.el-menu-demo{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1999;
}
.header>>>.el-menu.el-menu--horizontal{
  border: 0px !important;
}
</style>
